<template>
  <div class="outmain ba_f">
    <div class="">
<!--      <div class="shuju_title mar_b20">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>实时概况</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-icon flex t_l mar_t20">-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">今日储值金额</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.todayMoney || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">今日赠送金额：{{jyData.todayGiveMoney || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">今日储值金额</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">累计储值金额</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.allMoney || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">累计赠送金额：{{jyData.allGiveMoney || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">累计储值金额</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">累计储值人数</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.people || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">较前一日：{{jyData.comparePeople || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">累计储值人数</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">平台剩余余额</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jyData.surplus || 0}}</p>-->
<!--              <p class="fon_12 title6 lh25">今日消耗余额：{{jyData.consume || 0}}</p>-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">平台剩余余额</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>余额明细</span>
      </div>
    </div>
    <div class="pad_20 flex-bet">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="昵称/手机号">
          <el-input v-model="formInline.name" size="medium" placeholder="昵称/手机号" @input="selach"></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
                  v-model="formInline.region"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="selach">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="selach">搜索</el-button>
<!--          <a :href="handelExport()" class="mar_l10"><el-button size="medium">导出</el-button></a>-->
        </el-form-item>
      </el-form>
      <div class="flex">

      </div>
    </div>
    <el-table
            :data="list"
            v-loading="listLoading"
            :element-loading-text="elementLoadingText"
            stripe
            style="width: 100%">
      <el-table-column
              prop="outTradeNo"
              label="用户信息"
      >
        <template slot-scope="scope">
          <div class="flex flex-y-top">
            <div class="">
              <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
            </div>
            <div class="mar_l10">
              <div class="flex">
                <div class="">
                  <div>{{scope.row.userName}}</div>
                  <div><el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）</el-tag></div>
                </div>
              </div>
<!--              <p class="fon_12 color_9 mar_t5">小程序</p>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="money"
              label="余额变化"
      >
        <template slot-scope="scope">
          <div v-show="scope.row.type=='1'" class="color-green">+{{scope.row.money}}</div>
          <div v-show="scope.row.type=='2'" class="color_rb">-{{scope.row.money}}</div>
        </template>
      </el-table-column>
      <el-table-column
              prop="note"
              label="备注"
      >
      </el-table-column>
<!--      <el-table-column-->
<!--              prop="createdAt"-->
<!--              label="操作员"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column
              prop="createdAt"
              label="交易时间"
      >
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
  import {balanceDetailed} from "@/api/statistics";
  import {changeDate} from "@/utils/index";
  import index from '../../api/index';
  export default {
    created() {
      this.fetchData()
      // this.rechargeStatistics()
    },
    data () {
      return {
        jyData:{
          todayMoney:'',
          todayGiveMoney:'',
          allMoney:'',
          allGiveMoney:'',
          people:'',
          comparePeople:'',
          surplus:'',
          consume:'',
        },
        formInline: {
          name: '',
          region: [],
        },
        list: [],
        listLoading: false,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      // async rechargeStatistics(){
      //   const {data} = await rechargeStatistics()
      //   this.jyData = data
      // },
      async fetchData() {
        this.listLoading = true;
        if(this.formInline.region && this.formInline.region.length){
          var startTime  = changeDate(this.formInline.region[0]);
          var endTime = changeDate(this.formInline.region[1]);
        }
        let param={
          page: this.page.currentPage,
          startTime,
          endTime,
          keyword: this.formInline.name,
        }
        const {data, count} = await balanceDetailed(param);
        this.list = data;
        this.page.total = count;
        this.listLoading = false;
      },
      selach(){
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
      // handelExport(){
      //   let startTime = this.formInline.region.length?changeDate(this.formInline.region[0]):''
      //   let endTime = this.formInline.region.length?changeDate(this.formInline.region[1]):''
      //   let backendPath = index.backendPath
      //   return backendPath + "channel/member/get-deposit-order?export=1"+'&page='+this.page.currentPage+'&keyword='+this.formInline.name+'&startTime='+startTime+'&endTime='+endTime
      // },
    }
  }
</script>
